Como configurar una aplicación para que se habrá por defecto al acceder a un enlace de un dominio concreto

Partimos de un proyecto base de Ionic con el proyecto de Android ya generado.

En el archivo AndroidManifest.xml añadimos el siguiente código:

    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="https" android:host="mbascoy.github.io" />
    </intent-filter>

Tenemos que modificar los siguientes atributos:

android:scheme es el nombre del esquema, usaremos https
android:host es el nombre del dominio, mbascoy.github.io en mi caso
android:pathPrefix (Opcional) es el nombre de la ruta por si no queremos usar solo el nombre del dominio base, tiene que incluir una barra al principio, por ejemplo /openapp

En el nuestro repositorio de github pages tenemos que añadir el archivo _config.yaml en la raiz con el siguiente contenido:

theme: jekyll-theme-cayman

include: [".well-known"]

Ahora tenemos que verificar nuestra página de github pages, para ello tendremos que subir un archivo a nuestro github pages.

El archivo lo podemos generar desde esta herramienta de google

Tenemos que indicar la siguiente información:

Nombre de dominio: mbascoy.github.io (el dominio de nuestro github pages)
App Package: io.ionic.starter (se encuentra en el archivo build.gradle)
Fingerprint: (es el hash sha256 que podemos consultar usando keytool)

Una vez introducimos los datos se genera el contenido que tenemos que introducir en el siguiente archivo:

https://mbascoy.github.io/.well-known/assetlinks.json

Con esto hecho nuestra App ya podrá verificar que ese dominio está asociado con nuestra App.

Nuestra App ya está lista para hacer uso de los App links, para probarlo no podemos abrir el navegador e ir directamente al dominio que hemos configurado, la navegación tiene que venir de un enlace que haya en una página o algún otro lado (como un chat de whatsapp)

Si queremos hacer una prueba rapida podemos entrar en la siguiente página de w3school (Desde el dispositivo donde tenemos nuestra App).

NOTA: El navegador NO puede ser una ventana de incognito, con el modo incognito no funcionan los App Links.

Cambiamos el enlace del boton para poner el dominio que hemos configurado, le damos a "Run" hacer efectivo el cambio de código y al pulsar el boton se abríra nuestra aplicación

Si queremos tener mas control cuando se abre la aplicación con un App link tenemos que incluir algunos cambios en el código de nuestra aplicación ionic.

Para esto tenemos que incluir un listener de appUrlOpen

En nuestro app.component.ts ponemos el siguiente código:

import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { App, URLOpenListenerEvent } from '@capacitor/app';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    private router: Router,
    private zone: NgZone
  ) {
    this.initializeApp();
  }

  initializeApp() {
    App.addListener('appUrlOpen', (event: URLOpenListenerEvent) => {
      this.zone.run(() => {
        const domain = 'mbascoy.github.io';

        const pathArray = event.url.split(domain);

        // Get the last element with pop()
        const appPath = pathArray.pop();
        if (appPath) {
          this.router.navigateByUrl(appPath);

        }
      });
    });
  }
}

Ahora en el archivo de rutas app-routing.module.ts incluimos la siguiente ruta:

Ahora en el componente tab1 podemos usar tanto Query parameters como Path variables para obtener los parámetros de la URL y usarlos en nuestra applicación

Si queremos podemos utilizar un scheme personalizado en vez de http o https.

Debemos de tener en cuenta las siguientes consideraciones al usar un scheme personalizado:

El scheme no necesita ser validado como una página con http o https, por contra si hay dos Apps que utilicen el mismo scheme se mostrará un menú indicando que App queremos abrir
Cuando indicamos un scheme tambien tenemos que indicar un host, de manera que siempre tenemos que llamar a una URL tipo miapp://mipagina, la parte de mipagina tiene que estár definida en la aplicación no podemos simplemente asociar el scheme miapp:// con cualquiera host a nuetra app, siempre tenemos que indicar algún host concreto.
El nombre del scheme debe de ir en minusculas.
En la documentación oficial dice que se pueden usar varios tipos de deeplinks mezclando https con un scheme personalizado, yo lo he probado y no funciona... o usas uno o el otro...

El código del intent queda así:

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="miapp" android:host="mipagina" />
</intent-filter>

Android | App Link | Deeplink

App Link (Deeplink) y github pages